<template>
	<view  v-if="data">
		<view class="banner">
			<swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" class="swiper"
			circular
			>
				<swiper-item v-for="item,index in data.images.split(',')" :key="index">
					<image :src="$str.img(item)" mode="aspectFill" class="img"></image>
				</swiper-item>
			</swiper>
			<view class="hiden"></view>
		</view>
		<u-navbar
		title="预约"
		:autoBack="true"
		:background="{
		background:'transparent'
		}"
		:border-bottom="false"
		titleSize="28rpx" titleColor="#fff"
		back-icon-color="#fff"
		:titleBold="false"
		class="nav"
		/>
		
		<view class="content bgf p30 m30 r20 bold">
			<view class="f36 c3 mb20">
				{{data.name}}
			</view>
			<view class=" bold">
				<text class="prc">￥{{data.price}}</text>
				<text class="mprc ml20">￥{{data.marketprice}}</text>
			</view>
		</view>
		
		<view class="bgf r20 mt20 ml30 mr30 p30">
			<view class="title f32 c3 bold mb20 t-flex">
				服务详情
			</view>
			<mp-html :content="data.detail_content"></mp-html>
		</view>
		
		<view class="bgf r20 mt20 ml30 mr30 p30">
			<view class="title f32 c3 bold mb20 t-flex">
				推广规则说明
			</view>
			<view class="c6">
				<mp-html :content="data.tg_content"></mp-html>
			</view>
		</view>
		
		<view class="bpad"></view><view class="bpad"></view>
		<view class="Allbottom t-flex center safeArea" >
			<needLogin  @onClick="$go(`/pages/createOrder/createOrder?id=${data.id}&name=${data.name}`)">
				<view class="btn t-flex center cf f30">立即下单</view>
			</needLogin>
		</view>
	</view>
	
	<loading v-else></loading>
	<contact></contact>
</template>

<script setup lang="ts">
	import { onShareAppMessage,onShareTimeline,onLoad} from "@dcloudio/uni-app"
	import { ref } from "vue";
	import { goodsDetail } from "../../api";
	import { strFn } from "../../lib/ts/util";
	import { useStore } from "../../store";
	
	
	const store = useStore()
	
	onLoad(options=>{
		getdata(options.id)
	})
	onShareAppMessage(()=>{
		
		let sf_pid = 0
		let xy_pid = 0
		if(store.userinfo){
			sf_pid = store.userinfo.is_sf==1?store.userinfo.id:0
			xy_pid = store.userinfo.is_sf==1?0:store.userinfo.id
		}
		
		return {
			title:data.value.name,
			imageUrl:strFn.img(data.value.image),
			path:`/pages/classDetail/classDetail?id=${data.value.id}&sf_pid=${sf_pid}&xy_pid=${xy_pid}`
		}
	})
	onShareTimeline(()=>{
		
		let sf_pid = 0
		let xy_pid = 0
		if(store.userinfo){
			sf_pid = store.userinfo.is_sf==1?store.userinfo.id:0
			xy_pid = store.userinfo.is_sf==1?0:store.userinfo.id
		}
		
		return {
			title:data.value.name,
			imageUrl:strFn.img(data.value.image),
			query:`id=${data.value.id}&sf_pid=${sf_pid}&xy_pid=${xy_pid}`
		}
	})
	
	let data = ref()
	const getdata = async (id:number)=>{
		data.value = await goodsDetail(id)
	}
	
	

</script>

<style scoped lang="scss">
	.nav{
		position: fixed;
	}

	.banner{
		position: relative;
		.swiper{
			height: 620rpx;
		}
		.hiden{
			position: absolute;
			bottom: 0;
			height: 60rpx;
			background-image: linear-gradient( transparent,#F5F6F7);
			width: 100%;
			z-index: 10;
		}
	}
	.content{
		margin-top: -140rpx;
		position: relative;
		z-index: 11;
		.prc{
			color: #FF1616;
		}
		.mprc{
			color: #bbb;
			text-decoration: line-through;
		}
	}
	
	.title{
		&:before{
			content:'';
			display: inline-block;
			width: 8rpx;
			height: 34rpx;
			background: #E40417;
			border-radius: 6rpx;
			margin-right: 18rpx;
		}
	}
	
	
	
	
</style>
